<template>
  <div className="details">
    <Loading v-show="isLoading" />
    <div v-show="!isLoading">
      <header>
        <button className="btn-back" onClick="{onCloseMovie}">&larr;</button>
        <img :src="movie.poster" :alt="`Poster of ${movie.movie} movie`" />
        <div className="details-overview">
          <h2>{{ movie.title }}</h2>
          <p>{{ movie.released }} &bull;</p>
          <p>{{ movie.genre }}</p>
          <p>
            <span>⭐️</span>
            {{ movie.imdbRating }} IMDb rating
          </p>
        </div>
      </header>

      <section>
        <div className="rating">
          <div v-if="watchedIdx < 0">
            <StarRating
              maxRating="{10}"
              size="{24}"
              onSetRating="{setUserRating}"
            />

            <button
              className="btn-add"
              onClick="{handleAdd}"
              v-if="userRating > 0"
            >
              + Add to list
            </button>
          </div>
          <p v-else>
            You rated with movie {{ watched[watchedIdx].userRating }}
            <span>⭐️</span>
          </p>
        </div>
        <p>
          <em>{{ movie.plot }}</em>
        </p>
        <p>Starring {{ movie.actors }}</p>
        <p>Directed by {{ movie.director }}</p>
      </section>
    </div>
  </div>
</template>

<script>
import Loading from "./Loading.vue";
import StarRating from "./StarRating.vue";

export default {
  props: ["watched", "onCloseMovie", "onAddWatched", "selectedId"],
  data() {
    return {
      isLoading: false,
      movie: {},
      userRating: "",
    };
  },

  computed: {
    watchedIdx() {
      return props.watched.findIndex((movie) => movie.id === props.selectedId);
    },
  },
};
</script>
